<template lang="">
    <div>
        <myheader/>
            <van-tabs v-model="active">
                    <van-tab title="用户名登录">
                           
                                    <van-field
                                      v-model="username"
                                      name="username"
                                      label="用户名"
                                      placeholder="用户名"
                                      :rules="[{ required: true, message: '请填写用户名' }]"
                                    />
                                    <van-field
                                      v-model="password"
                                      type="password"
                                      name="password"
                                      label="密码"
                                      placeholder="密码"
                                      :rules="[{ required: true, message: '请填写密码' }]"
                                    />
                                    <div style="margin: 16px;">
                                      <van-button round block type="info" native-type="submit" @click='onSubmit'>提交</van-button>
                                    </div>
                                 
                    </van-tab>
                    <van-count-down :time="3000" format='还差ss结束' :auto-start="false" v-show='show' ref='countDown' @finish="finish"/>
                    <van-tab title="手机号登录">
                            
                                    <van-field
                                     width=100
                                      v-model="mobile"
                                      name="mobile"
                                      label="手机号"
                                      placeholder="用户名333"
                                      :rules="[{ required: true, message: '请填写用户名' }]"
                                    />  <van-button size="small" color="orange" @click="sendmsg" >发送验证码</van-button>

                                    <van-field
                                      v-model="code"
                                      name="验证码"
                                      label="验证码"
                                      placeholder="验证码"
                                      :rules="[{ required: true, message: '请填写验证码' }]"
                                    />
                                    <div style="margin: 16px;">
                                      <van-button round block type="info" native-type="submit" @click='onSubmit1'>提交</van-button>
                                    </div>
                                
                    </van-tab>
                 
                  </van-tabs>
                  
    </div>
</template>
<script>
import myheader from '@/components/myheader'
import { Toast } from 'vant';
export default {
    data() {
        return {
        active: 1,
        username: '',
      password: '',
      mobile:'',
      code:'',
      show:false
        }
  },
  methods: {
    onSubmit(values) {
      alert('sddd')
    },
    onSubmit1(values) {
      alert('111sddeeeed')
    },
    sendmsg(){
        this.show=true
        this.$refs.countDown.start();
    },
    finish(){
        Toast('倒计时结束')
        this.$refs.countDown.reset();
        this.show=false
    }
  },
    //注册组件
    components:{
        'myheader':myheader,
      
       
    }
}
</script>
<style lang="">
    
</style>